<template>
  <div>
    <el-card shadow="always">
      <el-form :ref="formRef" :model="formColumnsData" :label-width="labelWidth" :inline="true" status-icon :rules="formColumnsRule" :size="formSize" >
        <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'varchar' && !item.hidden" class="el-form-item-custom">
          <template>
            <slot :name="item.prop" :data="formColumnsData">
              <el-input type="text" v-model="formColumnsData[item.prop]"  autocomplete="off" :size="formSize"></el-input>
            </slot>
          </template>
        </el-form-item>
        <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="'selectChild' + index" v-if="item.dataType === 'select' && !item.hidden" class="el-form-item-custom">
          <el-select v-model="formColumnsData[item.prop]" placeholder="请选择" :size="formSize">
            <el-option
              v-for="itemChild in item.options"
              :key="itemChild.value"
              :label="itemChild.label"
              :value="itemChild.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'radio'" class="el-form-item-custom">
          <el-radio v-model="formColumnsData[item.prop]" v-for="(itemChild,index) in item.value" :label="itemChild.label" :key="'child' + index" :size="formSize">{{itemChild.showName}}</el-radio>
        </el-form-item>
        <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'checkbox'" class="el-form-item-custom">
          <el-checkbox-group v-model="formColumnsData[item.prop]" :size="formSize">
            <el-checkbox v-for="(itemChild,index) in item.value" :label="itemChild.label" :key="'checkboxItemChild' + index">{{itemChild.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-for="(item,index) in formColumns" :label="item.label"  :prop="item.prop" :key="index" v-if="item.dataType === 'datePicker'" class="el-form-item-custom">
          <el-date-picker
            v-model="formColumnsData[item.prop]"
            :type="datePicker.type"
            :start-placeholder="datePicker.startPlaceholder"
            :end-placeholder="datePicker.endPlaceholder"
            :size="datePicker.size"
            :format="datePicker.format"
            :default-time="datePicker.defaultTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="el-form-item-custom">
          <el-button type="text" @click="handleClick(formColumnsData,'search')" icon="el-icon-search" class="el-form-item-custom">查询</el-button>
          <el-button type="text" @click="handleClick(formColumnsData,'cancel')" icon="el-icon-close" class="el-form-item-custom">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    formType: {
      type: String,
      default: 'add'
    },
    // formRef: {
    //   type: String,
    //   default: 'addForm'
    // },
    editData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    formColumns: {
      type: Array
    },
    formColumnsRule: {
      type: Object
    },
    formSize: {
      type: String,
      default: 'mini'
    },
    labelWidth: {
      type: String,
      default: '80px' // 设置这个值让标签名与输入框在同一行
    },
    datePicker: {
      type: Object,
      default: function () {
        return {
          type: 'daterange',
          startPlaceholder: '开始日期',
          endPlaceholder: '结束日期',
          size: 'mini',
          format: 'yyyy-MM-dd HH:mm:ss',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    },
    customColumnsData: {
      type: Object
    }
  },
  data () {
    return {
      formColumnsData: {}
    }
  },
  computed: {
    formRef () {
      return this.formType + 'Form'
    }
  },
  watch: {
    customColumnsData: {
      handler: function (value, oldValue) {
        Object.keys(value).forEach(key => {
          this.formColumnsData[key] = value[key]
        })
      },
      deep: true
    }
    // formType: {
    //   handler: function (value, oldValue) {
    //     this.formRef = value + 'Form'
    //   },
    //   immediate: true
    // }
  },
  mounted: function () {
    this.formColumns.forEach(item => {
      // this.addColumnsData[item.prop] = undefined
      // Vue.set(object, key, value)
      let type = item.dataType
      switch (type) {
        case 'checkbox':
          this.$set(this.formColumnsData, item.prop, [])
          break
        case 'datePicker':
          this.$set(this.formColumnsData, item.prop, [])
          break
        default:
          this.$set(this.formColumnsData, item.prop, undefined)
          break
      }
      // if (item.dataType === 'checkbox') {
      //   this.$set(this.formColumnsData, item.prop, [])
      // } else {
      //   this.$set(this.formColumnsData, item.prop, undefined)
      // }
    })
    // if (JSON.stringify(this.editData) === '{}') {
    //   return
    // }
    // Object.keys(this.editData).forEach(key => {
    //   this.formColumnsData[key] = this.editData[key]
    // })
  },
  methods: {
    getFormData () {
      this.$emit('getFormData', this.formColumnsData)
    },
    handleOk (data = {}, type) {
      this.$emit('getFormData', data, type, this.$refs)
    },
    handleClick (data = {}, type) {
      switch (type) {
        case 'search':
          /// 解决搜索组件data在父组件中值被修改,再次提交时,原有的一些值不再存在
          let _data = JSON.stringify(data)
          let deepCloneData = JSON.parse(_data)

          this.$emit('getFormData', deepCloneData, type, this.$refs)
          break
        case 'cancel':
          this.$refs[this.formRef].resetFields()
          this.$emit('getFormData', {}, type, this.$refs)
          break
        default:
          alert('此操作未定义!')
          break
      }
    },
    handleCancel (type) {
      switch (type) {
        case 'add':
          this.$refs[this.formRef].resetFields()
          break
        case 'edit':
          break
        default:
          alert(type + ':没有定义此操作!')
          break
      }
      this.$emit('handleCancel', type)
    }
  }
}
</script>

<style scoped>

</style>
